<template>
  <div>
    <div class="head">
      <img class="img1" src="static/img/background.jpg" alt="" />
      <i @click="backMine()" class="el-icon-back back"></i>
      <van-icon class="search" name="search" color="whitesmoke" size="30" />
      <van-icon
        @click="visibleBtn()"
        class="ellipsis"
        name="ellipsis"
        color="whitesmoke"
        size="30"
      />
      <div class="con">
        <!-- <van-image
          round
          width="7rem"
          height="7rem"
          src="https://img.yzcdn.cn/vant/cat.jpeg"
        /> -->
        <van-image
         
        v-if="id===null"
        @click="jumpLogin()"
          
          round
          width="7rem"
          height="7rem"
          src=""
        />
        <van-image
        v-else
        @click="jumpTouxiangDetail()"
          round
          width="7rem"
          height="7rem"
          :src="url"
        />
        <button @click="jumpChangeDetail()" class="btn">编辑资料</button>
        <p class="p2">{{username}}</p>
        <div class="sign">
          <i class="el-icon-edit edit"></i>
          <span @click="jumpChangeDetail()"  class="sp1">点击设置我的签名</span>
        </div>
        <div class="care">
          <span class="sp2">1</span>
          <span class="sp3">关注</span>&nbsp;&nbsp;&nbsp;&nbsp;
          <span class="sp4">1</span>
          <span class="sp5">粉丝</span><br />
          <button class="btn1">6分钟前活跃</button>
        </div>
      </div>
    </div>
    <div class="box">
      <van-tabs background="whitesmoke" class="tab" v-model="active">
        <van-tab title="动态">
          <van-empty image="error" description="描述文字" />
        </van-tab>
        <van-tab title="点评">内容 2</van-tab>
        <van-tab title="交易">内容 3</van-tab>
        <van-tab title="收藏单">内容 4</van-tab>
      </van-tabs>
    </div>
    <div class="msg" v-show="show">
      <van-icon
        @click="escCha()"
        class="cross"
        size="15"
        color="#2c2c2c"
        name="cross"
      />
      <p class="p1" @click="jumpSelfMsg()">查看我的资料</p>
    </div>
  </div>
</template>
<script>
import { Toast } from 'vant';
export default {
  data() {
    return {
       username:sessionStorage.getItem('username'),
      id: sessionStorage.getItem('roleId'),
      url: sessionStorage.getItem('src'),
       routeFrom:'',
      show: false,
      active: 0,
      isLoading: false,
    };
  },
  methods: {
    backMine() {
      this.$router.push('/mine');
    },
    // 修改资料
    jumpChangeDetail(){
      this.$router.push('/change');

    },
    // 查看资料
    visibleBtn() {
      this.show = true;
    },
    escCha() {
      this.show = false;
    },
    // 跳转到资料
    jumpSelfMsg() {
      this.$router.push('/self');
    },
  },
 beforeRouteEnter (to, from, next) {
    // 官方解释在此无法获取组件的this，还没创建
    // 可以使用next函数的回调，可以获取创建之前的组件实例
    next(function(vm) {
        // vm就是当前组件的实例，把从哪来的路径赋值给当前组件中的变量
        vm.routeFrom = from.path;
    });
},
};
</script>
<style scoped>
.head {
  width: 100%;
  height: 30rem;
}
.img1 {
  width: 100%;
  height: 30rem;
}
.back {
  color: whitesmoke;
  font-size: 3rem;
  position: absolute;
  top: 1.4rem;
  left: 1rem;
}
.search {
  position: absolute;
  top: 1.2rem;
  right: 7rem;
}
.ellipsis {
  position: absolute;
  top: 1.2rem;
  right: 2rem;
}
.msg {
  width: 17rem;
  height: 6rem;
  background-color: whitesmoke;
  border-radius: 1.5rem 0 0 1.5rem;
  position: absolute;
  top: 1rem;
  right: 0px;
}
.p1 {
  text-align: center;
  line-height: 6rem;
  font-size: 2rem;
  color: #2c2c2c;
}
.cross {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}
.con {
  width: 90%;
  position: relative;
  top: -23.8rem;
  left: 1rem;
}
.btn {
  width: 10rem;
  height: 4rem;
  background-color: rgb(156, 156, 155, 0.5);
  border: none;
  border-radius: 2.5rem;
  font-size: 1.6rem;
  color: rgb(209, 206, 206);
  position: absolute;
  top: 1.6rem;
  right: 1.3rem;
}
.p2 {
  font-size: 2rem;
  color: whitesmoke;
  margin-top: 0.6rem;
}
.edit {
  color: #b8b5b5;
  font-size: 1.6rem;
  
}
.sp1 {
  color: #b8b5b5;
  font-size: 1.6rem;
  position: absolute;
  top: -0.3rem;
  left: 2rem;
}
.sign {
  margin-top: 1rem;
  position: relative;
}
.sp2 {
  font-size: 2.4rem;
  color: whitesmoke;
  position: absolute;
  top: -0.1rem;
}
.sp4 {
  font-size: 2.4rem;
  color: whitesmoke;
  position: absolute;
  top: -0.1rem;
  left: 8.1rem;
}

.sp3 {
  font-size: 1.8rem;
  color: whitesmoke;
  position: absolute;
  top: 0px;
  left: 2rem;
}
.sp5 {
  font-size: 1.8rem;
  color: whitesmoke;
  position: absolute;
  top: 0px;
  left: 10rem;
}
.care {
  margin-top: 0.5rem;
  position: relative;
}
.btn1 {
  width: 9rem;
  height: 2.5rem;
  background-color: rgb(156, 156, 155, 0.5);
  border: none;
  border-radius: 2.5rem;
  font-size: 1.2rem;
  color: rgb(209, 206, 206);
  position: absolute;
  bottom: -3.9rem;
}
.box {
  width: 100%;
  height: 10rem;
  background-color: whitesmoke;
  border-radius: 2rem 2rem 0 0;
  top: -2.6rem;
  position: relative;
  overflow: hidden;
}
.tab {
  margin-top: 0.5rem;
  border-radius: 2rem 2rem 0 0;
}
</style>